<template>
  <view class="register">
    <image :src="app.logo" class="logo"></image>
    <u-form ref="uForm" :model="form" label-width="160">
      <u-form-item :label="$t('手机号')" prop="phone">
        <view class="phone">
          <u-input v-model="form.phone" />
          <u-button size="mini" type="primary" @tap="getCode">{{ verification.tips }}</u-button>
        </view>
      </u-form-item>
      <u-form-item :label="$t('验证码')" prop="vercode">
        <u-input v-model="form.vercode" />
      </u-form-item>
      <u-form-item :label="$t('密码')" prop="password">
        <u-input v-model="form.password" type="password" />
      </u-form-item>
      <u-form-item :label="$t('确认密码')" prop="password_agin">
        <u-input v-model="form.password_agin" type="password" />
      </u-form-item>
    </u-form>
    <u-collapse v-if="password_gz && password_gz.length > 0" class="passwordRules">
      <u-collapse-item align="right" :title="$t('密码规则')">
        <view v-for="(item, index) in password_gz" :key="index" class="passwordRules-item">
          {{ item }}
        </view>
      </u-collapse-item>
    </u-collapse>
    <u-verification-code
      ref="uCode"
      :seconds="verification.seconds"
      @change="verificationChange"
    ></u-verification-code>
    <u-button
      :custom-style="customStyle"
      :loading="loading"
      :ripple="true"
      ripple-bg-color="#55aaff"
      shape="circle"
      type="success"
      @click="bindReg()"
    >
      {{$t('注册')}}
    </u-button>
    <u-no-network></u-no-network>
  </view>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'

export default {
  data() {
    return {
      orgCode: '',
      clientid: '',
      password_gz: [],
      loading: false,
      customStyle: {
        background: 'linear-gradient(to right, #00aaff 0%,#0079FF 100%)',
        margin: '40rpx 0 20rpx'
      },
      verification: {
        tips: '',
        seconds: 120
      },
      form: {
        phone: '',
        vercode: '',
        password: '',
        password_agin: ''
      },
      rules: {
        phone: [
          {
            required: true,
            message: this.$t('请输入手机号'),
            trigger: ['blur']
          },
          {
            validator: (rule, value, callback) => {
              return this.$u.test.mobile(value)
            },
            message: this.$t('手机号码不正确'),
            trigger: ['blur']
          }
        ],
        vercode: [
          {
            required: true,
            message: this.$t('请输入验证码'),
            trigger: ['blur']
          }
        ],
        password: [
          {
            required: true,
            message: this.$t('请输入密码'),
            trigger: ['blur']
          }
        ],
        password_agin: [
          {
            required: true,
            message: this.$t('请输入确认密码'),
            trigger: ['blur']
          }
        ]
      }
    }
  },
  computed: mapGetters(['userInfo', 'api', 'app']),
  onReady() {
    this.$refs.uForm.setRules(this.rules)
  },
  onLoad(e) {
    uni.setNavigationBarTitle({title: this.$t('用户注册')})
    this.orgCode = e.orgCode
    //获取密码规则
    this.getTips()
    //#ifdef APP-PLUS
    //获取个推信息
    this.getui()
    //#endif
  },
  onShow() {},
  methods: {
    getui() {
      this.clientid = plus.push.getClientInfo().clientid
    },
    bindReg() {
      this.$refs.uForm.validate((valid) => {
        if (valid) {
          //校验密码规则
          this.strategypassword_check()
        }
      })
    },
    //校验密码规则
    strategypassword_check(password) {
      if (this.form.password !== this.form.password_agin) {
        uni.showToast({
          title: this.$t('两次密码不一致'),
          icon: 'none'
        })
        return
      }
      this.$u
        .post(this.api.GLOBAL_auth_strategypassword_check, { password: this.form.password })
        .then((res) => {
          if (res.code === 510) {
            //密码不符合规则
            uni.showToast({
              title: res.msg,
              icon: 'none'
            })
          } else {
            this.$u
              .post(this.api.GLOBAL_auth_user_reg, {
                value2: this.form.password, //密码
                password_agin: this.form.password_agin, //确认密码
                value3: this.form.phone, //手机号码
                value4: this.form.vercode, //验证码
                clientid: this.clientid, //个推
                value5: this.orgCode //公司编码
              })
              .then((res) => {
                if (res.code === 200) {
                  uni.showToast({
                    title: res.msg,
                    icon: 'none'
                  })
                  setTimeout(() => {
                    uni.navigateBack({
                      delta: 2
                    })
                  }, 1500)
                }
              })
          }
        })
    },
    //获取密码规则
    getTips() {
      let req = {
        code: this.orgCode
      }
      this.$u.post(this.api.GLOBAL_auth_strategypassword_getTipsByCode, req).then((res) => {
        if (res.code === 200) {
          this.password_gz = res.data
        }
      })
    },
    //获取手机验证码
    iPhoneCode() {
      // num 0:注册获取验证码  1:修改密码获取验证码,2重置密码
      this.$u
        .get(this.api.GLOBAL_auth_user_getPhoneCode, { phone: this.form.phone, num: 0 })
        .then((res) => {
          if (res.code === 200 && res.data) {
            uni.showModal({
              title: res.msg,
              showCancel: false
            })
            uni.hideLoading()
            this.$refs.uCode.start()
          }
        })
    },
    getCode() {
      if (!this.form.phone) {
        uni.showToast({
          title: this.$t('请先填写手机号码'),
          icon: 'none'
        })
        return
      }

      if (this.$refs.uCode.canGetCode) {
        uni.showLoading({
          title: this.$t('正在获取验证码')
        })
        this.iPhoneCode()
      } else {
        this.$u.toast(this.$t('倒计时结束后再发送'))
      }
    },
    verificationChange(text) {
      this.verification.tips = text
    }
  }
}
</script>
<style lang="scss" scoped>
.register {
  background-color: #fff;
  padding: 50upx;
  box-sizing: border-box;
  height: 100%;
  width: 100%;

  .logo {
    width: 250upx;
    height: 250upx;
    margin: 0 auto 20upx;
    display: block;
  }

  .phone {
    display: flex;
    width: 100%;
    align-items: center;
  }

  .passwordRules {
    width: 100%;
    text-align: right;
    padding: 20rpx 0 0;
    color: #888;

    .passwordRules-item {
      text-align: right;
      padding-right: 20rpx;
    }
  }
}
</style>
